/**********
@name: title组件
@describtion: props: title:字段别名,value:字段值
@author:liubingye
@date:2023-02-10 10:29:07
***********/
<template>
  <div class="title-outer-box">
    <div class="editor-icon" v-if="titleChildren && titleChildren.length > 0" @click="isMoreTitle = !isMoreTitle">
      <span :class="{'plus':isMoreTitle}"></span>
    </div>
    <el-form-item class="title-form-item" :prop="props.field">
      <!--   popoverVisible   -->
      <el-popover
        trigger="focus"
        :visible="popoverVisible"
        :width="selectorWidth"
      >
        <div class="link-title" style="min-height: 60px;" v-loading="optionLoading">
          <div class="title-item" v-for="item in titleLink" :key="item.id">
            <div class="title-box">
              <p class="title-p">
                <a :href="item.url" target="_blank">{{item.title}}</a>
              </p>
              <p>
                <span v-for="(cate,index) in item.categoryList" :key="cate.id"><u v-show="index>0" style="text-decoration: none;">></u>{{cate.name}}</span>
              </p>
            </div>
            <div class="button-box">
              <span class="is-exit" v-if="item.status === 2">已存在</span>
              <el-button text @click="importArticle(item)" v-if="item.status === 1">导入</el-button>
            </div>
          </div>
        </div>
        <template #reference>
          <el-input
              @focus="onInputFocus"
              @blur="onInputBlur"
              v-model="inputVal"
              autosize
              :placeholder="'输入' + props.title "
              show-word-limit
              :maxlength="props.setting.maxlength"
              type="textarea"
              @keydown="handleKeyDown"
              resize="none"
              ref="inputRef"
          />
        </template>
      </el-popover>
    </el-form-item>
    <div v-if="thumbComponent">
      <el-popover
          v-if="fieldsValue[thumbComponent.field]"
          :width="202"
      >
        <template #reference>
          <div class="title-item-thumb has-thumb" @click="handleChangeThumb">
            <i class="iconfont">&#xe609;</i>
          </div>
        </template>
        <div class="thumb-box">
          <div class="delete-thumb" @click.stop="handleDeleteThumb">
            <el-icon><Delete /></el-icon>
          </div>
          <img :src="fieldsValue[thumbComponent.field]" alt="">
        </div>
      </el-popover>
      <div class="title-item-thumb" v-else @click="handleChangeThumb">
        <i class="iconfont">&#xe609;</i>
      </div>
    </div>
  </div>
  <div v-if="titleChildren && titleChildren.length > 0">
    <el-collapse-transition>
      <div class="title-children" v-show="isMoreTitle">
        <div class="title-children-item" v-for="item in titleChildren" :key="item.id">
          <RuifoxTextBasic v-if="item.component === 'text'" :field="item.field" :title="item.name" v-model:value="fieldsValue[item['field']]" :placeholder="item.tips"/>
        </div>
      </div>
    </el-collapse-transition>
    <RuifoxThumb
        ref="ruifoxThumbRef"
        v-if="thumbComponent"
        v-model:value="fieldsValue[thumbComponent['field']]"
        :showForm="false"
        :content="thumbComponent.setting.grabfield ? fieldsValue[thumbComponent.setting.grabfield] : ''"
        :title="thumbComponent.name"
        :field="thumbComponent.field"
    />
  </div>
</template>

<script setup>
import { computed, reactive, ref, onMounted, nextTick, watch } from "vue";
import { searchLinkTitle } from "@/api/content";
import { Delete } from "@element-plus/icons-vue"

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  },
  children: {
    type: Array,
    default: () => []
  },
  field: {
    type: String,
    default: ''
  },
  modelId: {
    type: String,
    default: ''
  },
  editId: {
    type: String,
    default: ''
  },
  fieldsValue: {
    type: Object,
    default: null
  },
  placeholder: {
    type: String,
    default: ''
  },
  setting: {
    type: Object,
    default: () => {}
  }
})
const emits = defineEmits(['update:value','importArticle','update:fieldsValue'])

const popoverVisible = ref(false)
const isMoreTitle = ref(false)
const inputVal = computed({
  get: () => props.value,
  set: val => {
    changeValue(val)
  }
})
const titleChildren = reactive(JSON.parse(JSON.stringify(props.children)))
const fieldsValue = computed({
  get: () => props.fieldsValue,
  set: (val) => {
    emits('update:fieldsValue',val)
  }
})
const optionLoading = ref(false)
const titleLink = ref([])
const handleSearchLinkTitle = async (val) => {
  if(props.setting.is_import && props.modelId && props.field) {
    optionLoading.value = true
    let res = await searchLinkTitle({title:val, model_id: props.modelId, field:props.field})
    titleLink.value = res.data
    if(titleLink.value.length > 0 && props.editId === ''){
      popoverVisible.value = true
    }else{
      popoverVisible.value = false
    }
    optionLoading.value = false
  }
}
const changeValue = (val) => {
  emits('update:value',val)
  //查询相关title
  if(val && props.editId === ''){
    popoverVisible.value = true
    handleSearchLinkTitle(val)
  }else{
    popoverVisible.value  = false
  }
}
const handleKeyDown = (e) => {
  if(e.key === 'Enter'){
    if (window.event) {
      window.event.returnValue = false;
    } else {
      e.preventDefault(); //for firefox
    }
  }
}
const onInputFocus = () => {
  if(inputVal.value){
    handleSearchLinkTitle(inputVal.value)
  }
}
const onInputBlur = () => {
  popoverVisible.value  = false
}


const inputRef = ref()
const selectorWidth = ref(0)
const getInputWidth = () => {
  nextTick(() => {
    selectorWidth.value = inputRef.value.$el.offsetWidth < 260 ? 260 : inputRef.value.$el.offsetWidth
  })
}
onMounted(() => {
  getInputWidth()
})
const importArticle = (item) => {
  emits('importArticle',item)
}
// 上传缩略图
const ruifoxThumbRef = ref()
const handleChangeThumb = () => {
  ruifoxThumbRef.value.handleShowThumbBox()
}
// 删除缩略图
const handleDeleteThumb = () => {
  ruifoxThumbRef.value.deleteThumb()
}
// 是否有缩略图
const thumbComponent = ref(titleChildren.find(item => {return item.field === 'thumb'}))
watch(() => titleChildren,(newVal) => {
  thumbComponent.value = newVal.find(item => {return item.field === 'thumb'})
},{deep:true})

</script>

<style scoped lang="scss">
.title-outer-box{
  min-height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid #E4E4E4;
  padding-bottom: 20px;
  padding-top: 40px;
  display: flex;
  .editor-icon{
    height: 16px;width: 16px;background-color: $mainColor;
    position: relative;
    border-radius: 2px;
    margin: 15px 5px 0 0;
    cursor: pointer;
    span{
      display: block;
      height: 100%;
      width: 100%;
    }
    span.plus:after{
      height: 0;
      top: 7px;
    }
    span:before,span:after{
      content: '';
      display: block;
      background-color: #fff;
      position: absolute;
      transition: all 0.3s;
    }
    span:before{
      height: 2px;
      width: 10px;
      left: 3px;
      top: 7px;
    }
    span:after{
      height: 10px;
      width: 2px;
      left: 7px;
      top: 3px;
    }
  }
  .title-form-item{
    flex: 1;
    margin-bottom: 0;
    ::v-deep(.el-textarea__inner){
      border: none;
      box-shadow: none;
      line-height: 36px;
      font-size: 24px;
      padding-right: 50px;
    }
    ::v-deep(.el-input__count){
      top: 15px;
    }
  }
  .title-item-thumb{
    height: 40px;
    width: 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #C4C9D5;
    border-radius: 4px;
    cursor: pointer;
    i{
      font-size: 18px;
      color: #AAAAAA;
    }
    &.has-thumb{
      background-color: #D1F0E2;
      border-color: #2CBF77;
      i{
        color: #2CBF77;
      }
    }
  }
}
.link-title{
  .title-item{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #e4e4e4;
    padding: 10px 0;
    .title-box{
      .title-p{
        @include textEllipsis(32px,1);
      }
    }
    .button-box{
      .is-exit{
        line-height: 32px;
        color: $failColor;
      }
    }
  }
}
.thumb-box{
  width: 176px;
  height: 120px;
  position: relative;
  &:hover{
    .delete-thumb{
      display: flex;
    }
  }
  .delete-thumb{
    color: $white;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    display: none;
    height: 24px;
    width: 24px;
    background-color: #FF5240;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.5);
    align-items: center;
    justify-content: center;
    i{
      font-size: 16px;
    }
  }
  img{
    height: 100%;
    width: 100%;
  }
}
</style>
